(function(){
    /*
        Namespace: translator.ui
    */
    translator.ui = {};
    
    translator.ui.main = function(){
        this._init();
    };
    var p = translator.ui.main.prototype;
    p._init = function(){
        this._initElements();
        this._initStyleSheet();
        this._initButtons();
        this._initEncodings();
        
    };
    p._initStyleSheet = function(){
        var heads = document.getElementsByTagName("head");
        var head = null;
        if (heads.length > 0){
            head = heads[0];
        }
        else {
            head = document.createElement("head");
            document.documentElement.appendChild(head);
        }
        
        var style = document.createElement("style");
        var def = ".translator, .translator div,.translator h3 {border: 0px solid #000; margin:0px; padding: 0px; text-transform: none; letter-spacing: 0px; font-family: tahoma; font-size: 12px;color: #FFF; background-Color: #000; }" + 
        	".translator {margin:0px; padding: 0px; position: fixed; width: 100px; text-align: left; z-index: 65535; filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=5,offY=5,positive=true); }" + 
            ".translator .innerContainer {margin: 6px;}" + 
            ".translator select {width: 60px;}" + 
            ".translator h3 {font-weight: bolder;}" + 
            ".translator .button {cursor:pointer;}";
            
        
        style.setAttribute("type", "text/css");
        
        if (style.styleSheet) {   // IE
            style.styleSheet.cssText = def;
        } else {                // the world
            var text = document.createTextNode(def);
            style.appendChild(text);
        }
        
        head.appendChild(style);
    };
    p._initButtons = function(){
        var buttons = this._createItem();
        buttons.title.innerHTML = "Jarble(beta)";
        var btnTranslate = document.createElement("button");
        btnTranslate.className = "button";
        btnTranslate.innerHTML = "Translate";
        
        // hook event
        translator.core.attachEvent(btnTranslate, "click", mapo.me(this, function(e){
            translator.entries.encode();
        }));
        buttons.content.appendChild(btnTranslate);
    };
    p._initEncodings = function(){
        var encodings = this._createItem();
        var ddlEncodings = document.createElement("select");
        var i = translator.encodings.availables.length;
        while(i--){
            var selected = translator.entries._ENCODING == translator.encodings.availables[i]._core.wrapper;
            var elOption = document.createElement("option");
            elOption.selected = selected;
            elOption.text = translator.encodings.availables[i].name;
            ddlEncodings.add(elOption);
        }

        // hook event
        translator.core.attachEvent(ddlEncodings, "change", mapo.me(this, this._ddlEncoding_Change));
        encodings.title.innerHTML = "Encoding";
        encodings.content.appendChild(ddlEncodings);
    };
    p._initElements = function(){
        this._elContainer = document.createElement("div");
        this._elInnerContainer = document.createElement("div");
        this._elContainer.appendChild(this._elInnerContainer);
        
        // styling container
        this._elContainer.className = "translator";
        this._elContainer.style.right = "10px";
        this._elContainer.style.top = "10px";
        this._elContainer.style.borderRadius = "5px";
        this._elContainer.style.MozBorderRadius = "5px";
        this._elContainer.style.WebkitBorderRadius = "5px";
        this._elContainer.style.KhtmlBorderRadius = "5px";
        
        this._elInnerContainer.className = "innerContainer";
        
        document.body.appendChild(this._elContainer);
    };
    p._createItem = function(){
        var elItem = document.createElement("div");
        var elInnerItem = document.createElement("div");
        var elTitle = document.createElement("div");
        var elInnerTitle = document.createElement("h3");
        var elContent = document.createElement("div");
        var elInnerContent = document.createElement("div");
        
        // applying style
        elItem.className = "item";
        
        elTitle.appendChild(elInnerTitle);
        elContent.appendChild(elInnerContent);
        elInnerItem.appendChild(elTitle);
        elInnerItem.appendChild(elContent);
        elItem.appendChild(elInnerItem);
        this._elInnerContainer.appendChild(elItem);
        
        return {title: elInnerTitle, content: elInnerContent};
    };
    p._ddlEncoding_Change = function(e){
        var e = e || event;
        var target = e.target || e.srcElement;
        var options = target.getElementsByTagName("option");
        var encodingName = String.empty;
        
        // get selected text
        var i = options.length;
        while(i--){
            if (options[i].selected == true){
                encodingName = options[i].text;
                break;
            }
        }
        
        // seeking for the ctor of encoding
        i = translator.encodings.availables.length;
        while(i--){
            if (translator.encodings.availables[i].name == encodingName){
                translator.encodings._ENCODING = translator.encodings.availables[i]._core.wrapper;
                break;
            }
        }
        
    };
    p._preventDefault = function(e){
        var e = e || event;
        
        e.preventDefault = true;
        return false;
    };
    translator.ui.main.create = function(){
        if (translator.ui.main.i == null){
            translator.ui.main.i = new translator.ui.main();
        }
        return translator.ui.main.i;
    };
})();